<template>
 <div>
   <div class="header">
     <i class="fa fa-hand-o-left" aria-hidden="true"></i>
     <h1>猫眼电影</h1>
   </div>
   <div class="login">
     <ul class="nav">
       <li>美团账号登录</li>
       <li>手机验证登录</li>
     </ul>
     <div class="meituan_loain">
       <form action="">
         <input type="text" placeholder="账户名/手机号/Email">
         <input type="text" placeholder="请输入您的密码">
       </form>
       <button>登录</button>
     </div>
     <div class="phone_login" v-if="isShow">
       <div class="phone">
         <input type="number" placeholder="请输入手机号">
         <button>发送验证码</button>
         <button>登录</button>
       </div>
       <input type="text" placeholder="请输入短信验证码">
     </div>
   </div>
 </div>
</template>

<script>
export default {
  data () {
    return {
      isShow: false
    }
  }
}
</script>

<style scoped lang="scss">
  body,html{
    height:100%;
  }
  .header{
    height:50px;
    width:100%;
    display: flex;
    align-items: center;
    text-align: center;
    font-size: 20px;
    background: #df2d2d;
    color: #fff;
    i{
      display: block;
      width:50px;
      height:50px;
      line-height: 50px;
    }
    h1{
      flex: 1;
    }
  }
  .login{
    width:100%;
    .nav{
      height:35px;
      line-height: 35px;
      border-bottom: 3px solid #d6d6d6;
      display: flex;
      justify-content: space-around;
      li{
        text-align: center;
      }
    }
    .meituan_loain{
        width: 100%;
        input{
          width:100%;
          height:15px;
          padding:15px;
          border: none;
          border-bottom:1px solid #d6d6d6;
          font-size: 15px;
        }
        button{
          width:96%;
          text-align: center;
          font-size: 16px;
          height:30px;
          background: #df2d2d;
          color:#fff;
          border:none;
          margin-top:16px;
          margin-left: 7.5px;
          border-radius: 3px;
        }
    }
  }
</style>
